<!DOCTYPE html>
<html>

<head>
    <script src='./tesseract.min.v4.0.0.js'></script>
</head>

<body>
    <div>
        <select id="langsel">
            <option value='chi_sim' selected> 中文 </option>
            <option value='eng'> English </option>
        </select>
        <input type="file" id="file-1" class="inputfile" onchange="change()"/>
        <div>
            <span id="startPre">
                <a id="startLink" onclick="recognizeText()" href="#">Click here to recognize text</a> or choose your own
                image
            </span>
        </div>
        <img id="image-img"></img>
        <div id="log">
        </div>
    </div>
    <script>
        async function recognizeText() {
            var file = document.getElementById('file-1').files[0];
            if (!file) {
                return;
            }
            var lan = document.getElementById('langsel').value;
            // v4.0.0
            var worker = await Tesseract.createWorker({
                'corePath': './tesseract-core.wasm.v4.0.0.js',
                'workerPath': './worker.min.v4.0.0.js',
                'langPath': 'data'
            });
            await worker.loadLanguage(lan);
            await worker.initialize(lan);
            var img = document.getElementById('image-img');
            var result = await worker.recognize(img);
            log.innerHTML = ''
            var pre = document.createElement('pre')
            pre.appendChild(document.createTextNode(result.data.text))
            log.append(pre)

        }

        function change() {
            var file = document.getElementById('file-1').files[0];
            if (!file) {
                return;
            }
            var img = document.getElementById('image-img');
            img.src = window.URL.createObjectURL(file)
        }

    </script>
</body>

</html>